import React from "react";
import { Card } from "antd";
import { ProductDataState, connect, Dispatch, Link } from 'umi'
import styles from "./index.less";
import { ProductBasicInfoType } from '../data.d';


interface PageProps {
  basicInfoLoading: boolean;
  productBasicInfos: ProductBasicInfoType[];
  dispatch: Dispatch;
  distributor: string;
  category: string;
}

class CardBasic extends React.Component<PageProps> {

  componentDidMount() {
    const { dispatch, distributor, category } = this.props;
    dispatch({
      type: 'productWorkplace/getProductBasicInfos',
      params: {
        distributor,
        category
      },
    })
  }

  render() {
    const { productBasicInfos} = this.props;

    return (
      <div className={styles.container} >
        <div id="components-card-demo-basic">
          <div >
            {
              productBasicInfos !== undefined ? productBasicInfos.map((item, index) => (
                <Card key={index} title={item.name} extra={<Link to={`/product/formRegister/${item.code}`}>购买</Link>} style={{ width: 200 }}>
                  <p>售价：{item.salePrice}</p>
                  <p>商品描述：{item.description}</p>
                </Card>
              )) : ''
            }
          </div>
        </div >
      </div >
    )
  }
}

export default connect(
  ({
    productWorkplace: { productBasicInfos },
    loading
  }: {
    productWorkplace: ProductDataState;
    loading: {
      effects: {
        [key: string]: boolean;
      };
    };
  }) => (
      // 这里的返回内容会绑定到CollapseAccordion 的 this.props上
      {
        productBasicInfos, // 这个对象的值就是model中的state
        basicInfoLoading: loading.effects['productWorkplace/getProductBasicInfos'],
      }
    ))(CardBasic);
